<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_3246975_r7ow77w0bdn.css">
    <script src="../js/cookie.js"></script>
    <style>
        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .header {
            background-color: #f5f5f5;
        }

        .header .header-nav {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
        }

        .header .header-nav .header-nav-l,
        .header .header-nav .header-nav-r {
            font-size: 12px;
            display: flex;
        }

        .header .header-nav li {
            padding-right: 20px;
        }

        .header .header-nav .header-nav-l {
            float: left;
        }

        .header .header-nav .header-nav-r {
            float: right;
        }

        .header .header-nav .header-nav-l .hide {
            display: none;
        }

        .sign-tips a:first-child,
        .sign-user a:first-child {
            margin-right: 5px;
        }

        .banner {
            height: 400px;
            margin-top: 10px;
            background-color: #6f6f6f;
        }

        /* 商品展示 */
        .goods-list {
            width: 1226px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            font-size: 12px;
            margin-top: 20px;
        }

        .goods-list li {
            width: 20%;
            box-sizing: border-box;
            padding: 5px 10px;
        }

        .goods-list li:hover {
            box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.4);
        }

        .goods-list li img {
            width: 80%;
            display: block;
            margin: 0px auto;
            margin-top: 10px;
        }

        .price {
            line-height: 32px;
            color: #e43981;
        }

        .desc {
            line-height: 24px;
            /* 老版本弹性盒 */
            display: -webkit-box;
            /* 超出两行隐藏 */
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .header-nav-search {
            margin-top: 4px;
            float: left;
        }


        .header-nav-search .searchBar {
            width: 240px;
            height: 30px;
            border: 1px solid #dfdfdf;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            margin-left: 200px;
        }

        .header-nav-search .searchBar .searchCon {
            border: none;
            width: 210px;
            text-indent: 5px;
            background-color: transparent;
        }

        .header-nav-search .searchBar .searchBtn {
            width: 30px;
            height: 30px;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            color: #dfdfdf;
        }
    </style>
</head>

<body>
    <div class="header">
        <div class="header-nav w">
            <ul class="header-nav-l">
                <li>湖北</li>
                <li class="sign-tips">
                    <a href="./login.html">亲,请登录</a>
                    <a href="./register.html">免费注册</a>
                </li>
                <li class="sign-user hide">
                    <a href="javascript:;" class="lg-user">欢迎您,xxx</a>
                    <a href="javascript:;" class="exit">退出登录</a>
                </li>
            </ul>
            <ul class="header-nav-search">
                <div class="searchBar">
                    <input type="text" class="searchCon">
                    <i class="iconfont icon-sousuo searchBtn"></i>
                </div>
            </ul>
            <ul class="header-nav-r">
                <li><a href="">我的淘宝</a></li>
                <li><a href="">购物车</a></li>
                <li><a href="">收藏夹</a></li>
            </ul>
        </div>
    </div>
    <div class="banner w">

    </div>
    <div class="container">
        <ul class="goods-list">
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="https://img12.360buyimg.com/n7/jfs/t1/42776/10/17345/131277/626bc1e3Eb2b0278a/1dc51316f3dc1898.jpg.avif"
                        alt="">
                    <div class="price">￥4499.00</div>
                    <div class="desc">笔记本电脑MateBook D 14 2022款 14英寸 11代酷睿 i5 16G+512G 锐炬显卡 轻薄本/护眼全面屏 银</div>
                </a>
            </li>
        </ul>
    </div>
</body>
<script>
    // 主页面标识用户身份
    // 用户没登录 =>  亲,请登录  免费注册
    // 用户已登录 =>  欢迎,xxx   退出

    var signTips = document.getElementsByClassName("sign-tips")[0];
    var signUser = document.getElementsByClassName("sign-user")[0];
    var goodsList = document.getElementsByClassName("goods-list")[0];
    var searchCon = document.getElementsByClassName("searchCon")[0];
    var searchBtn = document.getElementsByClassName("searchBtn")[0];

    var lgc = getCookie("lgc");
    if (lgc) {
        signTips.classList.add("hide");
        signUser.classList.remove("hide");
        var lgUser = signUser.getElementsByClassName("lg-user")[0];
        var exit = signUser.getElementsByClassName("exit")[0];

        lgUser.textContent = `欢迎您,${lgc}`;
        exit.onclick = function () {
            deleteCookie("lgc");
            location.reload();
        }
    }


    searchBtn.onclick = function () {
        var wd = searchCon.value;
        location.href = "./search.html?wd=" + wd;
    }

    var xhr = new XMLHttpRequest();

    xhr.open("get", "http://43.138.81.225/demo/php/searchAllGoods.php", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            result = JSON.parse(result);
            console.log(result);

            var { status, message, list } = result;
            if (status) {
                var html = "";
                list.forEach((item) => {
                    var { goodsId, goodsName, goodsPrice, goodsImg } = item;
                    console.log(item);
                    html += `<li>
                    <a href="">
                        <img src="${goodsImg}"
                            alt="">
                        <div class="price">￥${goodsPrice}</div>
                        <div class="desc">${goodsName}</div>
                    </a>
                </li>`
                })
                goodsList.innerHTML = html;
            }
        }
    }



</script>

</html>